<template>
  <div class="">
    <div class="boxs bor_10 " :style="{ width: `${data.length * 120}px` }" style="background-color: rgb(0, 105, 223);">
      <nav class="xsgb wz_white" style="color: white!important;">
        <a v-for="(item,index) in data" :key="index"
           @click="moveSlider(index,item.id)"
           :class="{ active: index === activeIndex }">
          <span>{{ item.name }}</span>
        </a>
        <div class="animation start-zixun" :style="{ left: `${activeIndex * 120}px` }"></div>
      </nav>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
const emit = defineEmits(["selectDiv"])
//接收父组件的用途和渲染数据
const props = defineProps({
  data: Array,
  title: String
});
// 寻找数据匹配的下标
const SelectDivindex = (e:any)=>{
  // @ts-ignore
    activeIndex.value = props.data.findIndex(item => item.id==e);
}
// 通过 expose 将 SelectDivindex 方法暴露给父组件
defineExpose({
  SelectDivindex,
});
//默认滑块从位置开始
let activeIndex= ref(0)
const moveSlider = (index: number,id:any) => {
  activeIndex.value = index;
  // 使用 $emit 触发事件并传递值给父组件 title用来区分当前组件的用途 需要在父组件的接收函数中处理数据
  emit('selectDiv',props.title,id);
}
</script>
<style scoped>
nav{
  position: relative;
  height: 50px;
}
nav a{
  /*padding: 5px 0;*/
  position: relative;
  display: block;
  float: left;
  line-height: 50px;
  height: 50px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  z-index: 10;
  font-weight:bold;
  user-select:none;
}
nav a{
  width: 120px;
  font-weight: normal;
  font-size: 18px;
  color: white;
}
nav .animation{
  position: absolute;
  height: 100%;
  width: 120px;
  background-color: #4f80f0;
  z-index: 9;
  border-radius: 10px;
  transition: all 0.3s;
}
</style>
